* {
    padding: 0;
    margin: 0;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    font-size: 62.5%;
    font-family: Microsoft YaHei, SimSun serif;
    background: rgb(245, 245, 245);
}

img {
    border: none;
}

.head {
    width: 100%;
    height: 10%;
    position: relative;
    background: rgb(255, 100, 165);
}

.head img {
    max-width: 50%;
    max-height: 50%;
    position: absolute;
    left: 3%;
    top: 25%
}

.head .search-area {
    position: relative;
    left: 18%;
    width: 80%;
    height: 80%;
    top: 20%;
}

.head .search-area form {
    position: relative;
    height: 100%;
    width: 100%;
    top: 0
}

.head .search-area input {
    width: 86%;
    height: 4rem;
    position: relative;
    top: -.5rem;
    left: -.3rem;
    border: none;
    border-radius: 0 .2rem .2rem 0;
    font-size: 1.6rem
}

.head .search-area button {
    position: relative;
    left: 0%;
    top: 1rem;
    background: white;
    width: 1.6rem;
    height: 4rem;
    border: none;
    border-radius: .2rem 0 0 .2rem;
}

.head .search-area button img {
    max-width: 80%;
    max-height: 80%
}
.border-bottom {
    border-bottom: .1rem solid #E4E4E4;
}
.content-bar {
    position: fixed;
    width: 100%;
    height: 8%;
    top: 0;
    background: white;
    z-index: 99;
}

.content-bar ul {
    position: relative;
    height: 100%
}

.content-bar ul li {
    position: relative;
    width: 20%;
    padding: 0;
    height: 100%
}
.content-bar .dropdown-menu{
    top: 1rem;
}
.content-bar .dropdown-menu li{
    height: auto;
}

.content-bar .nav .dropdown {
    position: relative;
    width: 36%
}

.content-bar ul li a {
    font-size: 1.6rem;
    text-align: center;
    display: block;
    height: 100%;
    color: #FF6FA5;
}
.content-bar ul li a.selected{
    color: #ab5f80;
}
.content-bar ul li a:hover {
    color: #c25c7a;
}

.content-bar .nav .dropdown .dropdown-menu {
    position: relative;
    min-width: 100%;
    margin: 0;
    height: initial;
}
.content-bar .nav .dropdown .dropdown-menu li{
    width: 100%;
}

.content-mid {
    width: 100%;
    height: auto;
    margin-top: 9vh;
    overflow: hidden;
}

.content-mid .pro {
    width: 46%;
    height: 48%;
    margin: .5rem;
    float: left;
    background: white;
}
.content-mid .pro .desc{
    width: 100%;
    padding: .6rem;
}

.content-mid .pro .pro-img {
    position: relative;;
    width: 100%;
    height: 46vw;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eee;
}
.content-mid .pro .pro-img img{
    min-width: 100%;
    min-height: 100%;
}

.content-mid .pro .sp-name {
    font-size: 1.3rem;
    color: black;
    display: block;
    height: 3.2rem;
    line-height: 1.6rem;
    overflow: hidden;
}
.content-mid .pro .line{
    width: 100%;
    background: #e4e5e7;
    height: 1px;
    margin-bottom: .5rem;
}
.content-mid .pro p {
    color: rgb(180, 180, 180);
    display: block;
    height: 2.7rem;
    overflow: hidden;
}

.content-mid .pro .pri {
    color: #FF6FA5;
    font-size: 1.3rem;
}

.content-mid .pro .disc {
    position: relative;
    float: right;
    font-size: 1.3rem;
}